import { PureComponent } from "react"
import { Grid, Modal, Button } from "antd-mobile"
import { getWindow, goToPage, isNull, isCheckPer, checkPermission, calcArr, calcField, calcPermissionArr, filterTemplate } from "../../utils/helper"
import MAction from "../MAction/MAction";


interface Props {
	columns?: any,
	fd: object,
	mark_dataset_key?: string,
	overflow_count?: any,
	corner_mark?: number,
	list?: any,
	border?: any,
	radius?: any,
	formData: object,
	default_pic?: string,
	is_text?: any,
	text_style?: any,
	is_carousel?: any,
	carousel_max_row?: any,
	template?: string,
	event_key?: string,
	imageColumns?: any,
	use_template?: any,//是否完全使用模板
}
interface State {
	itemWidth: number,
	imageWidth: number,
	badgeWidth: number
}

export default class MGrid extends PureComponent<Props, State> {
	public state: State = {
		itemWidth: 0,
		imageWidth: 0,
		badgeWidth: 23
	}
	componentWillMount() {
		let { columns = 3, imageColumns = 4 } = this.props;
		if (isNull(imageColumns)) {
			imageColumns = 4
		}
		imageColumns *= 1;
		this.setState({
			itemWidth: getWindow().width / columns,
			imageWidth: (getWindow().width / imageColumns) * 0.5
		})
	}
	renderDot(item) {
		let { fd, mark_dataset_key, overflow_count } = this.props;
		if (isNull(overflow_count)) {
			overflow_count = 99
		}
		if (isNull(mark_dataset_key)) {
			return null;
		}
		let count_list = fd[mark_dataset_key] || [];
		let { corner_mark = 0 } = this.props;
		corner_mark = isNull(corner_mark) ? 0 : corner_mark;
		//corner_mark 0不显示 1数字圆点 2圆点 默认0
		let { badgeWidth, itemWidth, imageWidth } = this.state;
		let dotPositionRight;
		if (corner_mark == 0) {
			return null
		}
		else if (corner_mark == 1 || corner_mark == 2) {
			let content: number | string = 0;
			let count_item = count_list.filter(i => i.code == item.code);
			if (count_item.length > 0) {
				content = count_item[0].value * 1
			}
			// content=Math.floor(Math.random()*60-30);
			if (content <= 0) {
				return null;
			}
			if (corner_mark == 1) {
				if (content > overflow_count) {
					content = overflow_count + "+"
				}
			} else {
				content = "";
				badgeWidth = 14
			}
			dotPositionRight = (itemWidth + imageWidth - badgeWidth) / 2;
			return (
				<p style={{
					width: badgeWidth + "px",
					height: badgeWidth + "px",
					borderRadius: "50%",
					backgroundColor: "red",
					left: dotPositionRight + "px",
					position: "absolute",
					top: "-" + badgeWidth / 2 + "px",
					color: "#fff",
					fontSize: "10px",
					textAlign: 'center',
					lineHeight: badgeWidth - 2 + "px",
					border: "1px solid #fff"
				}}>{content}</p>
			)
		}
		return null
	}
	render() {
		let { list, columns = 3, border, radius = 0, formData, default_pic, is_text, text_style, is_carousel, carousel_max_row, template, no_data_msg, use_template } = this.props;
		if (list && list.length == 0) {
			return (
				<div dangerouslySetInnerHTML={{ __html: no_data_msg }}>

				</div>
			);
		}
		radius = isNull(radius) ? 0 : radius;
		//radius 圆角类型 0-50 百分比 >=50都为圆角
		let newList = list.map(item => {
			return {
				...item,
				text: item.name
			}
		});
		let newNewList = []
		newList.map(item => {
			let newItem: any = {};
			let _obj = {};
			let { permission_ctrl: _ctrl, permission_code: _code } = item;
			if (isCheckPer(_ctrl, _code) && calcPermissionArr.indexOf(_ctrl) != -1) {
				let per = checkPermission(_code);
				if (item[_ctrl] === undefined) {
					item[_ctrl] = per;
				}
				else {
					_obj[_ctrl] = per
				}
			}
			for (let i in item) {
				let val = item[i];
				if (calcArr.indexOf(i) != -1) {
					let isTrue = calcField(val, formData);
					if (calcPermissionArr.indexOf(i) !== -1) {
						isTrue = isTrue && (_obj[i] !== false);
					}
					newItem[i] = isTrue;
				}
			}
			newItem = {
				...item, ...newItem
			}
			if (newItem.visible !== false && newItem.visible !== 0 && newItem.visible !== "0") {
				newNewList.push(newItem)
			}
		})
		newList = newNewList;
		let { imageWidth } = this.state;
		return (
			<div className="mi-grid">
				<Grid
					data={newList}
					columnNum={columns}
					hasLine={border == 1}
					isCarousel={is_carousel == 1}
					carouselMaxRow={carousel_max_row}
					square={false}
					renderItem={
						(item) => {
							let { name, icon } = item;
							if (isNull(icon)) {
								if (isNull(default_pic)) {
									icon = undefined;
								}
								else {
									icon = default_pic // 缺省图片
								}
							}
							if (use_template) {
								return <div style={{ position: "relative" }} data-flex="dir:top cross:center">
									{this.renderDot(item)}
									<div style={{
										width: imageWidth + "px", height: imageWidth + "px",
										borderRadius: radius + "%"
									}} data-flex="cross:center main:center">
										<div style={{ width: "100%", height: "100%" }} dangerouslySetInnerHTML={{ __html: filterTemplate(template, { ...formData, ...item }) }}>
										</div>
									</div>
								</div>
							}
							if (is_text == 1) {
								return <div style={{ position: "relative" }} data-flex="dir:top cross:center">
									{this.renderDot(item)}
									<div style={{
										width: imageWidth + "px", height: imageWidth + "px",
										borderRadius: radius + "%", background: "#efefef", fontSize: "22px", color: "#1890ff", ...text_style
									}} data-flex="cross:center main:center">{icon}</div>
									<p style={{ margin: "5px 0", fontSize: "12px" }}>{name}</p>
								</div>
							}
							else if (!isNull(template)) {
								return <div style={{ position: "relative" }} data-flex="dir:top cross:center">
									{this.renderDot(item)}
									<div style={{
										width: imageWidth + "px", height: imageWidth + "px",
										borderRadius: radius + "%", background: "#efefef", fontSize: "22px", color: "#1890ff", ...text_style
									}} data-flex="cross:center main:center">
										<div style={{ width: "100%", height: "100%" }} dangerouslySetInnerHTML={{ __html: filterTemplate(template, { ...formData, ...item }) }}>

										</div>
									</div>
									<p style={{ margin: "5px 0", fontSize: "12px" }}>{name}</p>
								</div>
							}
							else {
								return <div style={{ position: "relative" }}>
									{this.renderDot(item)}
									<img style={{
										width: imageWidth + "px", height: imageWidth + "px",
										borderRadius: radius + "%"
									}} src={icon} alt="" />
									<p style={{ margin: "5px 0", fontSize: '12px' }}>{name}</p>
								</div>
							}

						}
					}
					onClick={_el => {
						let { event_key } = _el;
						MAction({ ...this.props, formData: { ...this.props.formData, ..._el } }, event_key || this.props.event_key, { title: _el.name });
					}
					} />
			</div>
		)
	}
}